<template>
  <a-layout class="allLayout">
    <a-layout-content>
      <unit-table
        ref="unitTable"
        :columns="this.$staticMenu.userApprovalListColumns"
        :size="pageSize"
        :params="tableParams"
        :sizeOptions="pageSizeOptions"
        :type="tableType"
        :url="tableUrl"
        rowKeyName="id"
      >
        <!-- end -->
         <span slot="statusSwitch" slot-scope="props">
            <a-tooltip placement="top">
              <template slot="title">
                <span>{{props.record.areaCodeName.toString()}}</span>
              </template>
              <span class="ellipsis">{{props.record.areaCodeName.toString()}}</span>
            </a-tooltip>
        </span>
        <!-- 补充表格每行的操作 -->
        <span slot="tableRowAct" slot-scope="props">
					<a @click="approvalUser(props.record)">
						<span class="ant-tag ant-tag-blue">
							<a-icon type="form"/> 审批
						</span>
					</a>
					<a-divider type="vertical"/>
					<a @click="rejectUser(props.record)">
						<span class="ant-tag ant-tag-volcano">
							<a-icon type="delete"/> 拒绝
						</span>
					</a>
				</span>
      </unit-table>
      <modal
        ref="userModalForm"
        :title="modalTitle"
        :visible="modalVisible"
        @cancel="handleCancel"
        @ok="handleOk"
      >
      </modal>
    </a-layout-content>
  </a-layout>
</template>

<script>
  import {GETALLUSER,DELETEUSER} from '@/../static/js/apis.js'
  import unitTable from "@/common/table"
  import modal from "./components/userApprovalModal"
  import _ from "lodash" //引入lodash：封装了诸多对字符串，数组，对象等常见数据类型的处理函数
  export default {
    inject: ['reload'],                                 //注入App里的reload方法
    name: 'approval',
    components: {
      unitTable,
      modal
    },
    data() {
      return {
        tableUrl: GETALLUSER.url,  //调用表格组件，必须参数，后台数据接口
        tableType: GETALLUSER.type,  //调用表格组件，必须参数，后台方法方法（get，post）
        pageSize: 15,
        pageSizeOptions: ['15', '20', '40'],
        tableParams: {
          userStatus:-1
        },
        /*modal参数*/
        modalTitle: '',     //modal标题
        modalVisible: false    //modal关闭打开控制器
      }
    },
    methods: {
      approvalUser(record) {
        this.modalTitle = "审批用户"
        this.modalVisible = true
        console.log(record)
        const pickArr = ['username','role','permissions','areaCodeName','security','realName']
        const formShowInfo = _.pick(record, pickArr)
        //把数据放入modal，要在form加载完成后
       this.$nextTick(() => {
          this.$refs.userModalForm.form.setFieldsValue(formShowInfo)
        })
      },
      rejectUser(record) {
        let self=this
        let param={
          id:record.id
        }
        DELETEUSER(param, function(res){
            if(res.code=='200'){
              self.$message.success(res.message)
              self.reload()
            }else{
              self.$message.error(res.message)
            }
        })
      },
      /*modal确定事件*/
      handleOk(e) {
        this.modalVisible = false
      },
      /*modal取消事件*/
      handleCancel(e) {
        this.modalVisible = false
      },
    },
    created() {
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .allLayout {
    margin: 30px;
  }

  .ant-layout-content {
    background-color: white;
  }

  .actionBtn button:not(:last-child),
  .ant-row button:not(:last-child) {
    margin-right: 20px;
  }

  .action {
    color: #1890ff
  }
  .searchCriteria{
    width:80%;
  }

  .ant-tag{
    margin: 5px;
  }
</style>
